<script>
    import Vue from 'vue'

    import {
        mapActions
    } from 'vuex'
    import util from '@/common/utils.js'

    // import mqtt from 'mqtt/dist/mqtt'
    export default {
        onLaunch: function() {

        },

        onLoad() {

        },
        onShow: function() {
            // 获取系统title高度
            this.initSystemInfo();
            // uni.ontabbar
            // console.log('App Show');
            // #ifdef APP-PLUS
            // #endif

            // #ifdef MP-WEIXIN
            uni.login({
                provider: 'weixin', //使用微信登录
                success: function(loginRes) {
                    console.log(loginRes);
                    let URL =
                        'https://api.weixin.qq.com/sns/jscode2session?appid=wx49df57ba8de163b9&secret=e90cdda021d2309228d2d8cb5baf5079&js_code=' +
                        loginRes.code + '&grant_type=authorization_code '
                    uni.request({
                        url: URL,
                        success: function(res) {
                            console.log(res.data) //res.data中有openid
                            uni.setStorageSync('openId', res.data.openid)
                        }
                    })
                }
            });
            // #endif

        },
        created() {



        },
        methods: {

            // 初始化系统信息
            initSystemInfo() {
                console.log('initSystemInfo-------', )
                uni.getSystemInfo({
                    success(e) {
                        // #ifndef MP
                        Vue.prototype.StatusBar = e.statusBarHeight;
                        if (e.platform === 'android') {
                            Vue.prototype.CustomBar = e.statusBarHeight + 50;
                        } else {
                            Vue.prototype.CustomBar = e.statusBarHeight + 43;
                        }
                        // #endif
                        // #ifdef MP-WEIXIN
                        Vue.prototype.StatusBar = e.statusBarHeight;
                        // eslint-disable-next-line
                        const custom = wx.getMenuButtonBoundingClientRect();
                        Vue.prototype.Custom = custom;
                        Vue.prototype.CustomBar = custom.top - e.statusBarHeight;
                        // #endif
                        // #ifdef MP-ALIPAY
                        Vue.prototype.StatusBar = e.statusBarHeight;
                        Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
                        // #endif
                        console.log(Vue.prototype.StatusBar)
                    }
                });
            },
        },
        onHide: function() {
            // console.log('App Hide');
        }
    };
</script>

<style lang="scss">
    ::v-deep .copy-selected {
        background: #007afc;
        color: white;
    }

    /* 解决头条小程序组件内引入字体不生效的问题 */
    /* #ifdef MP-TOUTIAO */
    @font-face {
        font-family: uniicons;
        src: url('/static/uni.ttf');
    }

    /* #endif */
    @import "uview-ui/index.scss";

    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }

    .margin {
        width: 90%;
    }

    .container {
        padding-top: 20upx;
        height: 100%;
    }

    uni-page-body {
        height: 100%;
    }

    .container-fixd {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        overflow: auto;
        //#ifdef H5
        margin-top: 88rpx;
        //#endif
    }

    uni-page-body,
    #app {
        height: 100%;
    }


    .button-box {
        width: 500rpx;
        color: #FFFFFF;
        font-size: 34rpx;
        text-align: center;
        padding-top: 20rpx;
        padding-bottom: 20rpx;
        background-color: #007AFF;
        border-radius: 45rpx;
    }

    .button-box:active {
        background-color: #6b96dd;
    }

    .button-box-small {
        color: #FFFFFF;
        font-size: 34rpx;
        text-align: center;
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
        background-color: #007AFF;
        border-radius: 5rpx;
    }

    .button-box-small:active {
        background-color: #6b96dd;
    }

    .button-box-middle {
        color: #FFFFFF;
        font-size: 30rpx;
        text-align: center;
        padding-left: 50rpx;
        padding-right: 50rpx;
        background-color: #007AFF;
        border-radius: 5rpx;
    }

    .button-box-middle:active {
        background-color: #6b96dd;
    }

    .button-box-middle_gray {
        color: #000000;
        font-size: 30rpx;
        text-align: center;
        padding-left: 50rpx;
        padding-right: 50rpx;
        background-color: #F1F1F1;
        border-radius: 5rpx;
    }

    .button-box-middle_gray:active {
        background-color: #D1D1D2;
    }

    .button-box:active {
        background-color: #6b96dd;
    }

    .center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .view-column {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    // 复选框样式
    uni-checkbox .uni-checkbox-input {
        border-radius: 50%;
    }

    uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
        border: 1rpx solid rgb(0, 122, 255);
        background-color: rgb(0, 122, 255);
    }

    uni-checkbox .uni-checkbox-wrapper {
        width: 100%;
    }

    uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
        color: #FFFFFF;
    }

    uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
        // border-color: transparent;
    }


    // .select {
    // 	display: flex;
    // 	// padding: 0 20upx;
    // 	margin-top: 30upx;
    // 	margin-bottom: 30upx;
    // }

    // .select-item {
    // 	flex: 1;
    // 	border: 1px solid #e3e3e3;
    // 	flex-direction: row;
    // 	width: 100%;

    // 	.width-100 {
    // 		width: 100%;
    // 		height: 65rpx;
    // 		display: flex;
    // 		justify-content: center;
    // 		align-items: center;
    // 		text-align: center;
    // 		position: relative;
    // 	}

    // 	.down-img {
    // 		// margin-left: 15rpx;
    // 		height: 18rpx;
    // 		width: 18rpx;
    // 		position: absolute;
    // 		right: 10rpx;
    // 		top: 22rpx;

    // 	}

    // 	.content {
    // 		// min-width: 95rpx;
    // 		// font-size: 23rpx;
    // 	}
    // }

    .select {
        display: flex;
        padding: 0 20upx;
        margin-top: 30upx;
        margin-bottom: 30upx;
    }

    // .width-100 {
    // 	width: 100%;
    // 	height: 65upx;
    // 	display: flex;
    // 	justify-content: center;
    // 	align-items: center;
    // 	position: relative;
    // 	text-align: center;
    // }
    .width-100 {
        width: 100%;
        height: 65rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
    }

    .down-img {
        // margin-left: 15rpx;
        height: 18rpx;
        width: 18rpx;
        position: absolute;
        right: 13rpx;
        top: 22rpx;
    }

    // .down-img {
    // 	margin-left: 30upx;
    // 	height: 20upx;
    // 	width: 20upx;
    // }

    .select-item {
        flex: 1;
        border: 1px solid #e3e3e3;
        flex-direction: row;
        width: 100%;

        .content {
            text-align: center;
            font-size: 23rpx;
        }
    }

    .select-item1,
    .select-item2 {
        border-right: none;
    }

    .select-item-no {
        border-right: none;
    }

    .load {
        display: flex;
        margin-top: 20rpx;
        justify-content: center;
    }

    .tag {
        // color: ;
        font-size: 20rpx;
        border: 1px solid;
        padding: 2rpx 5rpx;
        border-radius: 5rpx;
    }

    .tag-default {
        color: #647efe;
        border: 1px solid #647efe;
    }

    .tag-other {
        color: #ff9655;
        border: 1px solid #ff9655;
    }

    .tag-active {
        color: #fc3412;
        border: 1px solid #fc3412;
    }

    .tag-db {
        color: #31c9ff;
        border: 1px solid #31c9ff;
    }
</style>